<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0; padding: 0;
			}
			input[type='checkbox'] {
				-webkit-appearance: none;
				margin: 50px;
				border: 10px solid #c1c1c1;
				border-radius: 50px;
				width: 170px; height: 70px;
				background-color: #888;
				position: relative;
				box-shadow: 0 0 10px 1px #3f3f3f inset;
				transition: 0.6s;
			}
			input[type='checkbox']:checked {
				background: #6fb500;
			}
			input[type='checkbox']::after {
				content: "";
				display: block;
				width: 60px; height: 60px;
				position: absolute;
				left: -5px; top: -5px;
				border-radius: 30px;
				background: gray;
				background: linear-gradient(to bottom,#d3d3d3,#9e9e9e);
				transition: 0.6s;
			}
			input[type='checkbox']:checked::after {
				left: 95px;
			}
		</style>
	</head>
	<body>
		<input type="checkbox" />
	</body>
</html>
